<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link href="/assets/bootstrap/js/jquery-confirm/jquery-confirm.min.css" rel="stylesheet">
    <link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/bootstrap/js/bootstrap-multitabs/multitabs.min.css" rel="stylesheet" type="text/css">
    <link href="/assets/bootstrap/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/assets/bootstrap/css/style.min.css" rel="stylesheet">
</head>

<body>
    <div class="container-fluid p-t-15">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">新增订单</div>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="form-group">
                                <label for="name">订单编号</label>
                                <input type="text" class="form-control maxlength" maxlength="60" id="order_no"
                                    placeholder="请输入订单编号">
                            </div>

                            <div class="form-group">
                                <label for="retry_times">订单金额</label>
                                <input type="text" class="form-control" id="order_fee" placeholder="请输入订单金额（分），例如：100">
                            </div>

                            <button type="button" id="btnOk" class="btn btn-primary">确认</button>
                            <button type="button" id="btnLoading" class="btn btn-primary" disabled
                                style="display: none">
                                <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                                执行中...
                            </button>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/assets/bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/assets/bootstrap/js/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>
    <script type="text/javascript" src="/assets/bootstrap/js/jquery-confirm/jquery-confirm.min.js"></script>
    <script type="text/javascript" src="/assets/bootstrap/js/bootstrap-multitabs/multitabs.min.js"></script>
    <script type="text/javascript" src="/assets/bootstrap/js/httpclient/httpclient.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#btnOk').on('click', function () {
                const order_no = $("#order_no").val();
                if (order_no === "") {
                    $.alert({
                        title: '温馨提示',
                        icon: 'mdi mdi-alert',
                        type: 'orange',
                        content: '请输入订单编号。',
                    });
                    return false;
                }

                const order_fee = $("#order_fee").val();
                if (order_fee === "") {
                    $.alert({
                        title: '温馨提示',
                        icon: 'mdi mdi-alert',
                        type: 'orange',
                        content: '请输入金额。',
                    });
                    return false;
                }

                const postData = {
                    order_no: $("#order_no").val(),
                    order_fee: $("#order_fee").val()
                };

                AjaxForm(
                    "POST",
                    "/api/order/create",
                    postData,
                    function () {
                        $(this).hide();
                        $("#btnLoading").show();
                    },
                    function (data) {
                        $("#btnLoading").hide();
                        $("#btnOk").show();

                        $.alert({
                            title: '操作成功',
                            icon: 'mdi mdi-check-decagram',
                            type: 'green',
                            content: '编号：' + data.id + ' 创建完成。',
                            buttons: {
                                okay: {
                                    text: '关闭',
                                    action: function () {
                                        location.href = "/order/list";
                                    }
                                }
                            }
                        });
                    },
                    function (response) {
                        $("#btnLoading").hide();
                        $("#btnOk").show();

                        AjaxError(response);
                    }
                );
            });
        })
    </script>
</body>

</html>